<!--
 * @Author: 关棺 3156298705@qq.com
 * @Date: 2025-01-03 15:44:50
 * @LastEditors: 关棺 3156298705@qq.com
 * @LastEditTime: 2025-01-06 09:34:52
 * @FilePath: \supervision-ui\src\views\file\Preview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="myCanvas" class="dxf-viewer-container"></div>
</template>

<script>
import { initBlueprint } from './blueprint.js';
let url = './cd.dwg';
export default {
  name: 'FilePreview',
  async mounted() {
    const { ViewerEvent, DxfViewer } = initBlueprint(
      'gwj:13-bhedggdjdgaaajifodfe'
    );

    const viewerCfg = {
      containerId: 'myCanvas', // 确保与模板中的 ID 一致
      enableSpinner: true,
      enableLayoutBar: true,
    };
    const modelCfg = {
      modelId: 'id_0',
      name: 'sample',
      src: url, // 确保路径正确
    };

    const fontFiles = ['./fonts/hztxt.shx', './fonts/simplex.shx'];

    const viewer = new DxfViewer(viewerCfg);

    try {
      await viewer.setFont(fontFiles);
      await viewer.loadModelAsync(modelCfg, (event) => {
        const progress = (event.loaded * 100) / event.total;
        console.log(`加载进度: ${progress}%`);
      });
      console.log('Loaded');
      viewer.goToHomeView();
    } catch (error) {
      console.error('加载 DXF 文件失败:', error);
    }
  },
};
</script>

<style scoped>
.dxf-viewer-container {
  width: 100%; /* 设置宽度 */
  height: 600px; /* 设置高度 */
  border: 1px solid #ccc; /* 可选：添加边框 */
}
</style>
